<template>
  <div class="h-[100%] bg-[#212121]">
    <div class="w-[100%] flex justify-between items-center h-[50px] px-[10px]">
      <el-input
        type="text"
        v-model="searchStr"
        suffix-icon="Search"
        @Input="searchHandle"
      >
      </el-input>
      <SvgIcon
        :iconClass="spanNum == 12 ? 'doubleCol' : 'singleCol'"
        size="27px"
        color="#c2bdbd"
        class="cursor-pointer"
        @click="toggleCol"
      ></SvgIcon>
    </div>
    <el-scrollbar>
      <el-row :gutter="5" class="pb-[50px]">
        <el-col
          draggable="true"
          @dragover.prevent
          @dragstart.native="drag($event)"
          :data-type="item.value"
          :data-label="item.name"
          :data-canreq="item.canReq"
          :data-iconname="item.iconName"
          :data-imgname="item.imgname"
          :span="spanNum"
          class="!flex flex-col items-center mb-[10px] cursor-pointer transition-all overflow-hidden duration-300"
          v-for="(item, index) in props.data"
          :key="index"
        >
          <div
            :data-type="item.value"
            :data-label="item.name"
            :data-canreq="item.canReq"
            :data-iconname="item.iconName"
            class="w-[85%] aspect-video rounded-[8px] flex justify-center items-center bg-[#2f2e2e]"
            v-if="item.ifIcon"
          >
            <Icons
              :data-type="item.value"
              :data-label="item.name"
              :data-canreq="item.canReq"
              :data-iconname="item.iconName"
              :icon="item.iconName"
            />
          </div>

          <img
            v-else
            :data-type="item.value"
            :data-label="item.name"
            :data-canreq="item.canReq"
            :data-imgname="item.imgname"
            class="w-[85%] aspect-video rounded-[8px]"
            :src="
              item.imgname
                ? getImageUrl(item.imgname + '.png')
                : getImageUrl(item.value + '.png')
            "
          />

          <div
            :data-type="item.value"
            :data-label="item.name"
            :data-canreq="item.canReq"
            :data-imgname="item.imgname"
            :data-iconname="item.iconName"
            class="title text-[#e9e9ea] text-[14px] w-[150px] mt-[4px] text-center box-border !overflow-hidden text-wrap !whitespace-pre-wrap !text-ellipsis"
            :class="{
              '!text-[12px]': spanNum == 12,
              '!w-[75px]': spanNum == 12,
            }"
          >
            {{ item.name }}
          </div>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { getImageUrl } from "@renderer/utils/other";
import Icons from "@renderer/components/icons/index.vue";
import { ref } from "vue";
type Props = {
  data: any[];
};

let props = withDefaults(defineProps<Props>(), {
  data: () => [],
});
let emit = defineEmits(["search"]);

let searchStr = ref("");
let spanNum = ref(24);
const toggleCol = () => {
  spanNum.value = spanNum.value === 12 ? 24 : 12;
};

const searchHandle = (value) => {
  emit("search", value);
};

const drag = (e) => {
  e.dataTransfer.effectAllowed = "move";
  e.dataTransfer.setData("name", e.target.dataset.type);
  e.dataTransfer.setData("labelName", e.target.dataset.label);
  e.dataTransfer.setData("canReq", e.target.dataset.canreq);
  e.dataTransfer.setData("iconname", e.target.dataset.iconname);
  e.dataTransfer.setData("imgname", e.target.dataset.imgname);
};
</script>

<style scoped lang="scss"></style>
